<template>
	<div class="two">
		<div class="shipingvod" v-for="item in vodData" :key="item.id">
			<div class="shipingvodUrl">
				<video :src="item.video.url" ></video>
				<img :src="item.video.imgUrl">
				<span class="shipingvodUrlTitle">{{item.title}}</span>
				<div class="bofang"></div>
				<span class="vodTime">{{item.video.dur|ontime}}</span>
			</div>
			<div class="shipingvodInfo">
				<div class="shipingvodInfoL">
					<div class="shipingvodInfoLImg">
						<img :src="item.user.avatarurl">
					</div>
					<div class="shipingvodInfoLName">
						<span>{{item.user.nickName}}</span>
					</div>
				</div>
				<div class="shipingvodInfoR">
					<div class="dianzan">
						<div class="dianzanimg">
							<img src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-praise.png">
						</div>
						<span>{{item.upCount}}</span>
					</div>
					<div class="dianzan">
						<div class="dianzanimg">
							<img src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-comment.png">
						</div>
						<span>{{item.commentCount}}</span>
					</div>
					<div class="lianjie">
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import axios from 'axios'
export default {
	name:"shipingbody1",
	data () {
		return {
			vodData:[]
		}
	},
	mounted () {
		axios({
			method:"get",
			url:"/asgard/asgardapi/sns/common/feed/channel/list.json?uuid=78357950D55C11EBA1A5576D6971D683084DD479B07649D698F153751D0AFAF3&channelId=4&feedChannelId=0&timestamp=1625282588618&offset=15"
		}).then(res=>{
			console.log(res["data"]["data"]);
			this.vodData = res["data"]["data"]["feeds"]
		})
	},
	filters:{
		ontime:function(val){
			let m = parseInt(val/60)
			let s = val - (m*60)
			return `${m}:${s}`
		}
	}
}
</script>

<style>
	.shipingvod{
		margin-bottom: .266667rem;
	}

	.shipingvodUrl{
		position: relative;
		width: 10rem;
		height: 5.6rem;
	}

	.shipingvodUrl video{
		width: 100%;
		height: 100%;
		background: black;
	}

	.shipingvodUrl img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.shipingvodUrlTitle{
		position: absolute;
		top: 0;
		left: 0;
		color: #fff;
		font-size: 15px;
		margin-top: .266667rem;
		margin-left: .266667rem;
	}

	.bofang{
		position:absolute;
		top: 45%;
		left: 45%;
		width: 1.546667rem;
		height: 1.546667rem;
		background: url(//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-btn-play.png);
		background-size: 100%;
	}

	.vodTime{
		position: absolute;
		bottom: .266667rem;
		right: .266667rem;
		color: #fff;
		font-size: 12px;
	}

	.shipingvodInfo{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 9.6rem;
		height: 1.226667rem;
		padding-left: .4rem;
	}

	.shipingvodInfoL{
		display: flex;
		align-items: center;
		font-size: 15px;
		color: #666;
	}

	.shipingvodInfoLImg{
		width: .586667rem;
		height: .586667rem;
	}

	.shipingvodInfoLImg img{
		width: 100%;
		height: 100%;
		border-radius: 20px;
	}

	.shipingvodInfoLName{
		margin-left: .32rem;
	}

	.dianzan{
		display: flex;
		align-items: center;
		margin-right: .266667rem;
	}

	.dianzanimg{
		width: .533333rem;
		height: .533333rem;
		margin-right: .186667rem;
	}

	.dianzanimg img{
		width: 100%;
		height: 100%;
	}

	.shipingvodInfoR{
		display: flex;
	}

	.lianjie{
		width: .533333rem;
		height: .533333rem;
		background: url(//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-share.png) no-repeat;
		background-size: 100% 100%;
		margin-right: .133333rem;
	}
</style>